<template>
  <div class="box">
    <div class="content4-1" style="position: relative">
      <div class="title">
        医护人员与床位统计
      </div>
      <div style="width: 754px;height: 213px" ref="userwaterChart"></div>

      <div class="title-water">
        <div style="margin-left: 52px">医生人数</div>
        <div style="margin-left: 152px">护士人数</div>
        <div style="margin-left: 142px">总床位数量</div>
      </div>
      <div class="table-div" style="height: 630px;overflow: scroll">
        <div style="width:100%;height: 800px" ref="bedBar"></div>
      </div>
    </div>

    <div class="content4-2" style="position: relative">
      <div class="title">
        医院医护人员概览
      </div>
      <div style="float: left;width:35%;height: 80%;margin: 20px;" ref="UserForDept"></div>
      <div style="float: left; width: 55%;margin-top: 25px;">
        <table id="cockpitTable">
          <tr class="table-title">
            <th width="40%" style="border-right: none;">部门名称</th>
            <th width="30%" style="border-right: none;">医生人数</th>
            <th width="30%" style="border-left: none;">护士人数</th>
          </tr>
        </table>
        <vue-seamless-scroll :data="userForDeptDTO" :class-option="optionHover" class="table-div">
          <table style="width: 100%">
            <tr style="cursor: pointer" v-for="item in userForDeptList">
              <td width="40%">{{item.name}}</td>
              <td width="30%">{{item.doctorvalue}}</td>
              <td width="30%">{{item.nursevalue}}</td>
            </tr>
          </table>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>
<script>
  import * as echarts from 'echarts'
  import 'echarts-liquidfill'
  import VueSeamlessScroll from 'vue-seamless-scroll'
  import { listUser, getUserProfile, getUserProfileBed } from '@/api/system/user'
  import { listBed, getBed, delBed, addBed, updateBed, dischargeBed } from '@/api/system/bed'
  import { getBtype, listBtype } from '@/api/system/btype'
  import { listPatient } from '@/api/system/patient'
  import { listBedCharts, listUserForDept } from '@/api/system/charts'

  export default {
    name: 'Index',
    data() {
      return {
        UserForDept: null,
        userForDeptDTO: [],
        userForDeptList: [{ name: '', doctorvalue: '', nursevalue: '' }],
        rgb1: null,
        rgb2: null,
        bedBar: null,
        userwaterChart: null,
        userForDeptCount_DeptType: [],
        userForDeptCount_DeptTypeNum: [],
        bedtypeCount_bedTypeName: [],
        bedtypeCount_bedNum: [],
        bedTypeCount: [],
        // 版本号
        version: '3.8.7',
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 床位信息表格数据
        bedList: [],
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open: false,
        //医生选项
        doctorOptions: [],
        //患者选项
        patientOptions: [],
        //护士选项
        nurseOptions: [],
        //床位类型
        bedTypeOptions: [],
        //床位类型名称
        btypeName: undefined,
        bedStatusOptions: [
          { value: 0, label: '空闲' },
          { value: 1, label: '占用' },
          { value: 2, label: '预约' }
        ],
        // 表单参数
        form: {
          doctorInfo: '', // 用于绑定医生信息的字段
          doctorName: '', // 用于显示医生名字的字段
          btype: {
            btypeName: ''
          }
        },
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          btypeId: null,
          //用于筛选的床位类别
          btype: {
            btypeName: null
          },
          patient: {
            patientName: null
          },
          status: null,
          bedTask: null,
          patientId: null,
          doctorInfo: null,
          nurseInfo: null,
          surgeryAppointment: null,
          checkinTime: null
        },
        // 表单校验
        rules: {
          // btypeName: [
          //   { required: true, message: '床位类型不能为空', trigger: 'change' }
          // ]
        }
      }
    },
    watch: {
      // 根据名称筛选部门树
      btypeName(val) {
        this.$refs.tree.filter(val)
      }
      // $route() {
      //   this.resizeChart();
      // },
    },
    computed: {
      optionHover() { //滚动组件属性
        return {
          step: 0.3,
          hoverStop: true // 是否开启鼠标悬停stop
        }
      }
    },
    created() {
      this.getUserBed()
      this.getIdType()
      this.getPatient()
      this.getBedTypeList()
      this.getBedTypeCount()
      this.getUserForDept()
    },

    methods: {

      initUserForDeptPie() {
        this.UserForDept = echarts.init(this.$refs.UserForDept, 'macarons')
        this.UserForDept.setOption({
          tooltip: {
            trigger: 'item',
            textStyle: {
              fontSize: '26'
            },
            formatter: '<div style=\'color: #d0860c;text-align: center\'>{b}</div>累计人数:<div style=\'color: #d0860c;text-align: center\'> {c}人</div>'
          },
          color: ['#0BC2FD', '#11FFFB', '#226EBC', '#F8BB05'],
          series: [
            {
              type: 'pie',
              radius: ['40%', '75%'],
              label: {
                show: false
              },
              emphasis: {
                scaleSize: 200,
                label: {
                  show: false,
                  fontSize: '12',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: this.userForDeptDTO
            },
            {
              name: '',
              type: 'pie',
              radius: ['83%'],
              hoverAnimation: false,
              center: ['50%', '50%'],
              itemStyle: {
                color: 'rgba(66, 66, 66, .0)',
                borderWidth: 1,
                borderColor: '#1c6ebf'
              },
              data: [100]
            }
          ]
        })
      },
      initBarChart() {
        this.userwaterChart = echarts.init(this.$refs.userwaterChart, 'macarons')
        this.userwaterChart.setOption({
          title: [
            {
              text: this.doctorOptions.length,
              x: '12%',
              y: '35%',
              textStyle: {
                fontSize: 45,
                fontWeight: 500,
                color: 'rgba(7, 156, 251, 1)',
                fontFamily: 'Source Han Sans CN'
              }
            },
            {
              text: this.nurseOptions.length,
              x: '47%',
              y: '35%',
              textStyle: {
                fontSize: 45,
                fontWeight: 500,
                color: 'rgba(248, 187, 5, 1)',
                fontFamily: 'Source Han Sans CN'
              }
            }
            ,
            {
              text: 6,
              x: '82%',
              y: '35%',
              textStyle: {
                fontSize: 45,
                fontWeight: 500,
                color: 'rgba(4, 249, 199,1)',
                fontFamily: 'Source Han Sans CN'
              }
            }
          ],
          series: [
            {
              radius: '70%', // 水球图的半径
              center: ['15%', '45%'],
              type: 'liquidFill',
              data: [0.4, 0.3, 0.2, 0.1],
              label: {
                show: false,
                fontSize: 36,
                fontWeight: 400,
                color: 'rgba(7, 156, 251, 1)'
              },
              backgroundStyle: {
                color: 'rgba(14, 36, 97, 1)',
                opacity: 0.5
              },
              outline: {
                show: true,
                itemStyle: {
                  shadowBlur: 5, // 边框的阴影范围 一旦设置了内外都有阴影
                  shadowColor: 'rgba(7, 156, 251, 1)', // 边框的阴影颜色,
                  borderWidth: 5, // 边框的宽度
                  borderColor: 'rgba(7, 156, 251, 1)' // 边框颜色
                }
              }
            },
            {
              radius: '70%', // 水球图的半径
              center: ['50%', '45%'],
              type: 'liquidFill',
              data: [0, 0.3, 0.2, 0.1],
              label: {
                show: false,
                fontSize: 36,
                fontWeight: 400,
                color: 'rgba(248, 187, 5, 1)'
              },
              backgroundStyle: {
                color: 'rgba(14, 36, 97, 1)',
                opacity: 0.5
              },
              itemStyle: {
                color: 'rgba(248, 187, 5, 1)', // 水球显示的背景颜色
                opacity: 0.5, // 波浪的透明度
                shadowBlur: 10 // 波浪的阴影范围
              },
              outline: {
                show: true,
                itemStyle: {
                  shadowBlur: 5, // 边框的阴影范围 一旦设置了内外都有阴影
                  shadowColor: 'rgba(248, 187, 5, 1)', // 边框的阴影颜色,
                  borderWidth: 5, // 边框的宽度
                  borderColor: 'rgba(248, 187, 5, 1)' // 边框颜色
                }
              }
            },
            {
              radius: '70%', // 水球图的半径
              center: ['85%', '45%'],
              type: 'liquidFill',
              data: [0.8, 0.3, 0.2, 0.1],
              label: {
                show: false,
                fontSize: 36,
                fontWeight: 400,
                color: 'rgba(4, 249, 199, 1)'
              },
              backgroundStyle: {
                color: 'rgba(14, 36, 97, 1)',
                opacity: 0.5
              },
              itemStyle: {
                color: 'rgba(4, 249, 199, 1)', // 水球显示的背景颜色
                opacity: 0.5, // 波浪的透明度
                shadowBlur: 10 // 波浪的阴影范围
              },
              outline: {
                show: true,
                itemStyle: {
                  shadowBlur: 5, // 边框的阴影范围 一旦设置了内外都有阴影
                  shadowColor: 'rgba(4, 249, 199, 1)', // 边框的阴影颜色,
                  borderWidth: 5, // 边框的宽度
                  borderColor: 'rgba(4, 249, 199, 1)' // 边框颜色
                }
              }
            }
          ]
        })
      },
      initBedBar() {
        this.bedBar = echarts.init(this.$refs.bedBar, 'macarons');
        this.bedBar.setOption({
          tooltip: {
            trigger: 'axis',
            textStyle: {
              fontSize: '26',
            },
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            top: '1%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            show: false,
            axisLabel: {
              fontSize: 24
            },
          },
          yAxis: [
            {
              type: 'category',
              inverse: true,
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              axisLabel: {
                // y轴文字的配置
                show: true,
                interval: 0,
                textStyle: {
                  color: '#fff',
                  fontSize: '26'
                }
              },
              data: this.bedtypeCount_bedTypeName
            },
            {
              type: 'category',
              inverse: true,
              axisTick: 'none',
              axisLine: 'none',
              show: true,
              axisLabel: {
                textStyle: {
                  color: '#fff',
                  fontSize: '30'
                }
              },
              data: this.bedtypeCount_bedNum
            }
          ],
          series: [
            {
              type: 'bar',
              datasetIndex: 1,
              data: this.bedtypeCount_bedNum,
              showBackground: true,
              barWidth: 30,
              label:{
                fontSize:20 // 调整柱状图标签字体大小
              },
              backgroundStyle: {
                color: '#0F2A68'
              },
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    1,
                    0,
                    0,
                    0,
                    [
                      { offset: 0, color: 'rgba(10, 196, 255, 1)' },
                      { offset: 1, color: 'rgba(44, 204, 255, 0.3)' }
                    ]
                  )
                }
              }
            }
          ]
        });
      },

      getUserForDept() {
        listUserForDept().then(response => {
          console.log('--listUserForDept--', response.data)
          this.userForDeptDTO = response.data.map(item => ({
            name: item.deptType,
            value: item.deptTypeNum
          }))
          this.userForDeptList = response.data.map(item => ({
            name: item.deptType,
            doctorvalue: item.doctorCount,
            nursevalue: item.nurseCount
          }))
          console.log('--userForDeptDTO--', this.userForDeptDTO)
          this.initUserForDeptPie()
        })
      },
      /** 查询床位数量列表 */
      getBedTypeCount() {
        listBedCharts().then(response => {
          this.bedTypeCount = response.data
          for (let i = 0; i < response.data.length; i++) {
            this.bedtypeCount_bedTypeName[i] = this.bedTypeCount[i].bedTypeName
            this.bedtypeCount_bedNum[i] = this.bedTypeCount[i].bedNum
          }
          this.initBedBar()
        })
      },
      /** 查询床位类型列表 */
      getBedTypeList() {
        listBtype().then(response => {
          this.bedTypeOptions = response.rows
        })
      },
      // 获取患者名单
      getPatient() {
        listPatient().then(response => {
          this.patientOptions = response.rows
        })
      },
      // 获取医生及护士名单
      getIdType() {
        listUser().then(response => {
          this.doctorOptions = response.rows.filter(user => user.identityType === 'D')
          this.nurseOptions = response.rows.filter(user => user.identityType === 'N')
          this.initBarChart()
        })
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const bedIds = row.bedId || this.ids
        this.$modal.confirm('是否确认删除床位信息编号为"' + bedIds + '"的数据项？').then(function() {
          return delBed(bedIds)
        }).then(() => {
          this.getUserBed()
          this.$modal.msgSuccess('删除成功')
        }).catch(() => {
        })
      },
      /** 出院按钮操作 */
      handleDischarge(row) {
        const bedId = row.bedId || this.ids
        this.$modal.confirm('是否确认出院床位信息编号为"' + bedId + '"的病人项？').then(function() {
          return dischargeBed(bedId)
        }).then(() => {
          this.getUserBed()
          this.$modal.msgSuccess('出院成功')
        }).catch(() => {
        })
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset()
        const bedId = row.bedId || this.ids
        getBed(bedId).then(response => {
          console.log('---getBed---', response.data)
          this.form = response.data
          console.log('---form---', this.form)
          this.open = true
          this.title = '修改床位信息'
        })
      },
      goTarget(href) {
        window.open(href, '_blank')
      },
      //修改显示
      formatStatus(row, column) {
        const status = row[column.property]
        switch (status) {
          case 0:
            return '空闲'
          case 1:
            return '占用'
          case 2:
            return '预约'
          default:
            return ''
        }
      },
      getUserBed() {
        this.loading = true
        getUserProfileBed().then(response => {
          this.bedList = response.rows
          this.total = response.total
          this.loading = false
        })
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs['form'].validate(valid => {
          console.log('---submit form---', this.form)

          this.form.btypeId = this.form.btype.btypeId
          // this.form.doctorInfo=this.form.doctorName
          // this.form.nurseInfo=this.form.nurseName
          if (valid) {
            if (this.form.id != null) {
              updateBed(this.form).then(response => {
                this.$modal.msgSuccess('修改成功')
                this.open = false
                this.getUserBed()
              })
            } else {
              addBed(this.form).then(response => {
                this.$modal.msgSuccess('新增成功')
                this.open = false
                this.getUserBed()
              })
            }
          }
        })
      },
      // 取消按钮
      cancel() {
        this.open = false
        this.reset()
      },
      // 表单重置
      reset() {
        this.form = {
          bedId: null,
          btypeId: null,
          btype: {
            btypeName: null
          },
          status: null,
          bedTask: null,
          patientId: null,
          doctorInfo: null,
          doctorName: null,
          nurseInfo: null,
          nurseName: null,
          surgeryAppointment: null,
          checkinTime: null,
          remark: null
        }
        this.resetForm('form')
      }
    }
  }
</script>
<style scoped lang="scss">
  .home {
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 10px;
    color: #676a6c;
    overflow-x: hidden;

    ul {
      list-style-type: none;
    }

    h4 {
      margin-top: 0px;
    }

    h2 {
      margin-top: 6px;
      font-size: 18px;
      font-weight: 100;
    }

    p {
      margin-top: 6px;

      b {
        font-weight: 700;
      }
    }

    .update-log {
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 20px;
      }
    }

    .content4-1 {
      width: 756px;
      height: 989px;
      background: url('../../assets/xiehospital/bj  1.png') no-repeat;
      background-size: 756px 989px;
      opacity: 0.9;
      margin-top: 20px;
      border-radius: 6px;
      padding: 4px 1px;
    }

    .content4-2 {
      width: 756px;
      height: 600px;
      background: url('../../assets/xiehospital/bj  2.png') no-repeat;
      border-radius: 6px;
      background: url('../../assets/xiehospital/bj  1.png') no-repeat;
      background-size: 756px 600px;
      margin-top: 20px;
      padding: 4px 1px;
    }

    .title {
      width: 386px;
      height: 62px;
      font-size: 36px;
      text-align: left;
      line-height: 60px;
      color: white;
      margin-left: 25px;
      margin-top: 10px;
    }

    .title-water {
      width: 100%;
      height: 4%;
      text-align: center;
      margin: 0 auto;
      font-size: 16px;
    }

    .title-water div {
      float: left;
      color: #fff;
      font-size: 28px;
      font-weight: bold;
    }

    table {
      border-spacing: 0px;
      width: 100%;
    }

    .table-title {
      width: 612px;
      height: 42px;
      background: #1F376B;
      border-radius: 4px;
    }

    .box .el-table th.el-table__cell > .cell {
      padding: 0;
    }

    .box .table-title th {
      text-align: center;
      color: #2E9BEC;
      margin-left: -2px;
      font-size: 28px;
      height: 60px;
      border: 1px #4f7cc2 solid;
    }

    .box .table-div {
      width: 100%;
      height: 400px;
      overflow: hidden;
      scrollbar-width: none;
    }

    .box .table-div tr td {
      color: #ABDAFF;
      font-size: 28px;
      text-align: center;
      height: 60px;
    }

    .box tr:nth-child(even) {
      background: rgba(0, 0, 0, 0);
    }

    .table-status-zc {
      color: #00F5FF;
    }

    .table-status-yc {
      color: #EED32C;
    }

    .table-status-cw {
      color: #FF5050;
    }

    .table-div1 {
      width: 100%;
      height: 228px;
      overflow: scroll;
      scrollbar-width: none;
    }

    .table-div2 {
      width: 100%;
      height: 114px;
      overflow: scroll;
      scrollbar-width: none;
    }

    ::-webkit-scrollbar {
      width: 0px;
      height: 0px;
      background-color: rgba(240, 240, 240, .0);
    }

    .main {
      display: flex;
      justify-content: space-between;
      padding: 0 5px;
      transform: scale(0.6, 0.6);
      transform-origin: 10px 0px;
      width: 3200px;
    }
  }
</style>
